<template>
    <div>
        <nav-com
          v-if="isanzhuo"
          :title="$t('groupPage.title.rankingList')"
          :showView='false'
          @back="back()"
        ></nav-com>
        <!--<div class="nav-bar">
            <div class="back" @click="back()">
                <img src='@/assets/back.png'>
            </div>
            <van-tabs v-model="active" class="top_tabs" >
                <van-tab :title="$t('groupPage.title.activity')">
                  <div class="acitve">
                    <van-tabs v-model="active1" class="subtitle_tabs">
                      <van-tab :title="$t('groupPage.subtitle.hotActivities')">
                        <div class="action_list">
                          <div class="action_item" v-for="item in actions" :key="item.id" @click="toDetail">
                            <div class="left">
                              <img :src="item.img" alt="" class="img">
                            </div>
                            <div class="right">
                              <div class="title">{{item.name}}</div>
                              <div class="time">时间:{{item.time}}</div>
                              <div class="num">
                                <span>参与人数:{{item.num}}人</span>
                                <span class="status" :class="{status_registered:item.status =='已报名',status_expired:item.status =='已截止',status_active:item.status =='活动中'}">{{item.status}}</span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </van-tab>
                      <van-tab :title="$t('groupPage.subtitle.publishedActivities')">
                        <div class="action_list">
                          <div class="action_item" v-for="item in actions" :key="item.id" @click="toDetail">
                            <div class="left">
                              <img :src="item.img" alt="" class="img">
                            </div>
                            <div class="right">
                              <div class="title">{{item.name}}</div>
                              <div class="time">时间:{{item.time}}</div>
                              <div class="num">
                                <span>参与人数:{{item.num}}人</span>
                                <span class="status" :class="{status_registered:item.status =='已报名',status_expired:item.status =='已截止',status_active:item.status =='活动中'}">{{item.status}}</span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </van-tab>
                      <van-tab :title="$t('groupPage.subtitle.participatedActivities')">
                        <div class="action_list">
                          <div class="action_item" v-for="item in actions" :key="item.id" @click="toDetail">
                            <div class="left">
                              <img :src="item.img" alt="" class="img">
                            </div>
                            <div class="right">
                              <div class="title">{{item.name}}</div>
                              <div class="time">时间:{{item.time}}</div>
                              <div class="num">
                                <span>参与人数:{{item.num}}人</span>
                                <span class="status" :class="{status_registered:item.status =='已报名',status_expired:item.status =='已截止',status_active:item.status =='活动中'}">{{item.status}}</span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </van-tab>
                    </van-tabs>
                  </div>
                </van-tab>
                <van-tab :title="$t('groupPage.title.rankingList')"> -->

                <!-- </van-tab>
            </van-tabs>
        </div>-->

      <div class="scrollerWrap" :class="isanzhuo?'margintop':''">
        <scroller  height="100%" :on-refresh="refresh">
          <div  class="content main-page-wrapper">
              <div class="user-select">
                  <div class="location select" @click="show1 = !show1">{{country?country:$t('dizhihuoqu')}}<img class="img" src='@/assets/dropdown.png'></div>
              </div>
              <div class="my-rank">
  <!--                <div class="title">{{$t('groupPage.myRanking.my')}}</br>{{$t('groupPage.myRanking.ranking')}}</div>-->
                  <img class="avatar" :src='my_rank.avatar?my_rank.avatar:require("../../assets/bicke.png")' style="border-radius: 50%;">
                  <div class="no">No:{{ my_rank.rank?(my_rank.rank > 9 ? my_rank.rank : ('' + my_rank.rank)):'～'}}</div>
                  <div class="distance">{{my_rank.totaldistance}}</div>
              </div>
              <div class="data-title" :class="$i18n.locale == 'zh' ? 'data-title-china':''">
                  <div class="user-rank">{{$t('groupPage.ranking.ranking')}}</div>
                  <div class="user-name"></div>
                  <div class="user-distance">{{$t('groupPage.ranking.tripDist')}}</div>
              </div>
              <van-empty :description="$t('groupPage.emptyDescription')" v-if="list.length <=0"/>
              <div v-else>
                  <div v-for="(item,index) in list" :key="index" class="data-item" :class="$i18n.locale == 'zh' ? 'data-item-china':''">
                      <div class="user-rank">{{item.rank > 9 ? item.rank : (item.rank)}}</div>
                      <div class="user-name"><img class="avatar" :src='item.avatar' style="border-radius: 50%;">
                          <div class="name">{{item.name}}</div> </div>
                      <div class="user-distance">{{item.totaldistance}}</div>
                      <div>
                          <!-- <button class="btn" @click="cycleComfirm">申请试骑</button> -->
                      </div>
                  </div>
              </div>
          </div>
        </scroller>
      </div>
        <!-- 发布活动 -->
        <!-- <img src="@/assets/group/activities_publish.png" @click="toPublishActivity" alt="" class="activities_publish" v-if="active == 0"> -->
        <!-- 选择距离 -->
<!--        <van-popup v-model="show" position="bottom" round>-->
<!--            <van-picker-->
<!--              class="jiabold"-->
<!--              :item-height="44"-->
<!--                show-toolbar-->
<!--                :columns="columns"-->
<!--                @confirm="onConfirm"-->
<!--                @cancel="show = false"-->
<!--                :confirm-button-text="$t('sure')"-->
<!--                :cancel-button-text="$t('close')"-->
<!--                />-->
<!--        </van-popup>-->
        <!-- 选择地区 -->
        <van-popup v-model="show1" position="bottom" round>
            <van-picker  class="regions" :item-height="44" show-toolbar :columns="countiesList" @confirm="onConfirm1" @cancel="show1 = false" :confirm-button-text="$t('sure')"
                        :cancel-button-text="$t('close')"/>
        </van-popup>
<!--      选择省份-->
<!--      <van-popup v-model="show" position="bottom" round>-->
<!--        <van-picker  class="regions" :item-height="44" show-toolbar :columns="provinceList" @confirm="onConfirm" @cancel="show1 = false" :confirm-button-text="$t('sure')"-->
<!--                     :cancel-button-text="$t('close')"/>-->
<!--      </van-popup>-->
<!--      选择城市-->
<!--      <van-popup v-model="show2" position="bottom" round>-->
<!--        <van-picker  class="regions" :item-height="44" show-toolbar :columns="cityList" @confirm="onConfirm2" @cancel="show1 = false" :confirm-button-text="$t('sure')"-->
<!--                     :cancel-button-text="$t('close')"/>-->
<!--      </van-popup>-->
        <!-- 消息提醒弹窗 -->
        <!-- <van-popup v-model="remindShow" style="border-radius: 28px;">
          <img src="@/assets/group/remind.png" alt="" style="width:calc(100vw - 40px);">
          <div class="remind_center">
            <div class="remind_title">开启推送及提醒</div>
            <div class="remind_content">
              <div style="margin-bottom:10px">1.开启立刻掌握骑行活动信息</div>
              <div style="margin-bottom:10px">2.及时掌握群组消息</div>
            </div>
            <van-button class="btn_submit" @click="remindShow = false">提交</van-button>
            <div class="btn_later" @click="remindShow = false">以后再说</div>
          </div>
        </van-popup> -->
    </div>
</template>

<script>
import navCom from '@/components/nav-com.vue'
import { Dialog, Empty } from 'vant'
import { activityLists } from '@/api/activity'
import { userInfo } from '@/api/user'
import { rankLists } from '@/api/ranking'
import { locationParsing, locationscreening } from '../../api/ranking'
export default {
  components: {
    navCom,
    vanEmpty: Empty
  },
  data () {
    return {
      country: '',
      countiesList: [],
      provinceList: [],
      cityList: [],
      active: 0,
      active1: 0,
      list: [
        // {
        //   rank: '01',
        //   name: '喜欢海33333333333333333',
        //   distance: '5.44km'
        // }
      ],
      lng: '',
      lat: '',
      region: this.$i18n.t('groupPage.currentRegion'),
      distance: this.$i18n.t('groupPage.distanceFromMe'),
      actions: [
        {
          id: 1,
          name: '骑行黄金周',
          time: '2023.01.07 12:11',
          num: 100,
          status: '已报名',
          img: require('@/assets/group/active.png')
        },
        {
          id: 2,
          name: '周末骑行日',
          time: '2023.01.07 12:11',
          num: 100,
          status: '已截止',
          img: require('@/assets/group/active.png')
        },
        {
          id: 3,
          name: '周末骑行日1',
          time: '2023.01.07 12:11',
          num: 100,
          status: '活动中',
          img: require('@/assets/group/active.png')
        }
      ],

      // 弹窗
      show: false,
      show1: false,
      show2: false,
      remindShow: true,
      columns: ['5miles', '4miles', '3miles', '2miles', '1miles', '0miles'],
      regioncolumns: [],
      my_rank: {},
      isanzhuo: false
    }
  },
  created () {
    this.region = this.$route.params.address || this.region
    this.lng = this.$route.params.lng || this.lng
    this.lat = this.$route.params.lat || this.lat
    const nav = navigator.userAgent
    if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
      this.isanzhuo = true
    } else if (nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
      this.isanzhuo = false
    }
    this.getloactioninfo()
  },
  onShow () {
    console.log('====出现了')
    this.getloactioninfo()
  },
  methods: {
    refresh (done) {
      this.jiexiloaction()
      setTimeout(() => {
        done()
      }, 1500)
    },
    getloactioninfo () {
      const nav = navigator.userAgent
      if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
        let res = phone.getlocationInfo()
        let datas = JSON.parse(res)
        this.lng = datas.lng
        this.lat = datas.lat
        this.jiexiloaction()
      } else if (nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        setTimeout(() => {
          this.$bridge.callhandler('getlocationInfo', {}, res => {
            let datas = res
            this.lng = datas.lng
            this.lat = datas.lat
            this.jiexiloaction()
          })
        })
      }
    },
    back () {
      this.$router.go(-1)
    },
    activityLists () {
      activityLists({ type: '1', page_size: 15 }).then(res => {
        console.log(res)
      })
    },
    // 用户信息
    getUserData () {
      userInfo().then((res) => {
        if (res.code == 1) {
        }
      })
    },
    locationinfo (id, type) {
      let params = {}
      if (type == 'province') {
        params.countiesId = id
      }
      if (type == 'city') {
        params.countiesId = this.countryId
        params.provinceId = id
      }
      locationscreening(params).then(res => {
        console.log(res)
        if (type == 'province') {
          this.provinceList = res.data.province
        } else if (type == 'city') {
          this.cityList = res.data.city
        } else {
          this.countiesList = res.data.counties
        }
      })
    },
    jiexiloaction () {
      let latlng = this.lng + ',' + this.lat
      locationParsing({ 'latlng': latlng }).then(res => {
        console.log(res)
        if (res.data.place != '') {
          let addressList = res.data.place.split(',')
          addressList.reverse()
          this.country = addressList[0]
          this.region = this.country
          addressList.forEach((item, index) => {
            let obj = {}
            obj.text = item.replace(' ', '')
            obj.id = item.replace(' ', '')
            obj.code = index
            this.countiesList.push(obj)
          })
          this.rankLists()
        }
      })
    },
    rankLists () {
      // this.region
      this.list = []
      let params = { lng: this.lng, lat: this.lat }
      console.log('====params', params)
      if (this.distance !== this.$i18n.t('groupPage.distanceFromMe')) {
        params.distance = Number(this.distance.replace('mile', ''))
      }
      if (this.region !== this.$i18n.t('groupPage.currentRegion')) {
        params.region = this.region
      }
      const nav = navigator.userAgent
      // if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
      //   let res = phone.location()
      //   console.log(' phone.location() => ', res)
      //   let datas = JSON.parse(res)
      //   rankLists({ ...params, ...datas }).then(res => {
      //     console.log('== phone rankLists', res)
      //     let { list, my_rank } = res.data
      //     this.list = list || []
      //     this.my_rank = my_rank || { }
      //   })
      // } else if (nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
      //   this.$bridge.callhandler('location', {}, res => {
      //     console.log(' $bridge.location() => ', res)
      //     let datas = res
      //     rankLists({ ...params, ...datas }).then(res => {
      //       console.log('== bridge rankLists', res)
      //       let { list, my_rank } = res.data
      //       this.list = list || []
      //       this.my_rank = my_rank || { }
      //     })
      //   })
      // } else {
      rankLists(params).then(res => {
        console.log('== rankLists', res)
        let { list, my_rank } = res.data
        this.list = list || []
        this.my_rank = my_rank || { }
      })
      // }
    },
    toPublishActivity () {
      this.$router.push('/publishActivity')
    },
    toDetail () {
      this.$router.push('/activityDetail')
    },
    // onConfirm (value, index) {
    //   console.log('===provinceList', value)
    //   this.province = value.text
    //   this.provinceId = value.provinceId
    //   this.city = ''
    //   this.region = this.country + ',' + value.text
    //   this.show = false
    //   this.locationinfo(value.provinceId, 'city')
    //   this.rankLists()
    // },
    onConfirm1 (value, index) {
      console.log('===obj', value)
      this.country = value.text
      this.countryId = value.id
      this.region = value.id
      // if (value.code == '0') {
      //   this.region = value.id
      // }
      // if (value.code == '1') {
      //   this.region = this.countiesList[0].id + ',' + value.id
      //   console.log("====id",this.region,value.id,this.countiesList[0].id)
      // }
      // if (value.code == '2') {
      //   this.region = this.countiesList[0].id + ',' + this.countiesList[1].id + ',' + value.id
      // }
      this.show1 = false
      this.rankLists()
    },
    // onConfirm2 (value, index) {
    //   console.log(value)
    //   this.city = value.text
    //   this.region = this.country + ',' + this.province + ',' + value.text
    //   this.show2 = false
    //   this.rankLists()
    // },
    cycleComfirm () {
      Dialog.confirm({
        title: '确认要申请试骑吗？',
        confirmButtonColor: '#0AD39F'
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        })
    }
  }
}
</script>

<style lang="scss" scoped>
    // .nav-bar {
    //     position: relative;
    //     .back {
    //         position: absolute;
    //         top: 0;
    //         height: 1.17333rem;
    //         display: flex;
    //         justify-content: center;
    //         align-items: center;
    //         z-index: 10;
    //         padding: 0 18px;
    //         img {
    //           width: 10px;
    //           height: 18px;
    //         }
    //     }
    //     ::v-deep .top_tabs .van-tabs__nav {
    //         padding-left: 25vw !important;
    //         padding-right: 25vw;
    //     }
    //     ::v-deep .top_tabs .van-tabs__wrap {
    //         border-bottom: 1px solid rgba(0,0,0,0.1);
    //     }
    //     ::v-deep .subtitle_tabs .van-tabs__wrap {
    //         box-shadow: 0px 2px 4px 0px rgba(63,156,148,0.1);
    //         border-radius: 0px 0px 6px 6px;
    //     }
    //     ::v-deep .subtitle_tabs .van-tabs__nav {
    //         padding-left: 0 !important;
    //         padding-right: 0;

    //     }
    //     ::v-deep .van-tab__text--ellipsis{
    //       overflow: visible;
    //     }
    //     ::v-deep .van-tab--active {
    //         font-size: 22px;
    //         font-weight: 600;
    //     }
    // }
    // .acitve {
    //   .action_list {
    //     padding: 12px 18px;
    //     .action_item {
    //       padding: 12px 10px;
    //       background: #FFFFFF;
    //       box-shadow: 0px 2px 4px 0px rgba(63,156,148,0.1);
    //       border-radius: 10px;
    //       display: flex;
    //       margin-bottom: 10px;
    //       .left {
    //         width: 84px;
    //         height: 84px;
    //         border-radius: 8px;
    //         overflow: hidden;
    //         .img {
    //           width: 100%;
    //           height: 100%;
    //         }
    //       }
    //       .right {
    //         display: flex;
    //         flex-direction: column;
    //         justify-content: space-between;
    //         height: 84px;
    //         width: calc(100% - 84px);
    //         font-weight: 400;
    //         color: #808080;
    //         padding: 0 10px;
    //         .title {
    //           font-size: 22px;
    //           font-weight: 500;
    //           color: #000000;
    //         }
    //         .time {
    //           font-size: 20px;
    //         }
    //         .num {
    //           display: flex;
    //           align-items: center;
    //           justify-content: space-between;
    //           font-size: 18px;
    //           .status {
    //             font-weight: 500;
    //           }
    //           .status_registered {
    //             color: #0AD39F;
    //           }
    //           .status_expired {
    //             color: #FA2C1E;
    //           }
    //           .status_active {
    //             color: #36BAFF;
    //           }
    //         }
    //       }
    //     }
    //   }

    // }
    // .remind_center {
    //   padding: 16px 40px;
    //   font-size: 18px;
    //   .remind_title {
    //     font-size: 22px;
    //     font-weight: 600;
    //     color: #303030;
    //     text-align: center;
    //   }
    //   .remind_content {
    //     margin-top: 18px;
    //     font-weight: 400;
    //     color: #808080;
    //   }
    //   .btn_submit {
    //     width: 100%;
    //     height: 46px;
    //     background: linear-gradient(90deg, #1ED6C2 0%, #00DEA1 100%);
    //     box-shadow: 0px 3px 4px 0px rgba(10,211,159,0.3);
    //     border-radius: 27px;
    //     font-size: 24px;
    //     font-family: Helvetica-Bold, Helvetica;
    //     font-weight: bold;
    //     color: #FFFFFF;
    //     margin-top: 10px;
    //   }
    //   .btn_later {
    //     margin-top: 6px;
    //     text-align: center;
    //     font-weight: 400;
    //     color: #808080;
    //   }
    // }
    // .activities_publish {
    //   position: absolute;
    //   bottom: 116px;
    //   right: 43px;
    //   height: 96px;
    //   width: 96px;
    // }
    .content {
        font-family: PingFang;
        min-height: 596px;
        margin: 9px 18px;
        padding: 4px 11px;
        background: #FFFFFF;
        box-shadow: 0px 2px 4px 0px rgba(63,156,148,0.3);
        border-radius: 16px;
        .user-select {
            display: flex;
            align-items: center;
            font-size: 18px;
            font-weight: 400;
            color: #0AD39F;
            border-bottom: 1px solid #F0F0F0;
            min-width: 20%;
            .select {
                // flex: 1;
                display: flex;
                align-items: center;
                padding: 8px 0;
                .img {
                    width: 14px;
                    height: 6px;
                    margin-left: 4px;
                }
            }
            .distance {
              margin-left:24px;
            }
        }
        .my-rank {
            padding: 11px 0;
            font-size: 18px;
            color: #0AD39F;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #F0F0F0;
            .title {
                font-size: 15px;
            }
            .avatar {
                width: 32px;
                height: 32px;
                margin-left: 8px;
                margin-right: 28px;
            }
          .no{
            width: 138px;
          }
            .distance {}
        }
        .data-title {
            display: flex;
            align-items: center;
            padding-top: 5px;
            padding-bottom: 7px;
            color: #808080;
            font-size: 16px;
            border-bottom: 1px solid #F0F0F0;
            .user-rank {
                min-width: 32px;
              text-align: center;
            }
            .user-name {
                margin-left: 6px;
                width:140px;
            }
        }
        .data-item {
            display: flex;
            align-items: center;
            padding: 12px 0;
            color: #808080;
            font-size: 18px;
            border-bottom: 1px solid #F0F0F0;
            position: relative;
            .user-rank {
                width: 32px;
                font-size: 20px;
              text-align: center;
            }
            .user-name {
                display: flex;
                align-items: center;
                margin-left: 35px;
                width:140px;
                .avatar {
                    width: 28px;
                    height: 28px;
                }
                .name {
                    margin-left: 5px;
                    width: 91px;
                    white-space:nowrap;
                    overflow:hidden;
                    text-overflow:ellipsis;
                    color: #000;
                }
            }
            .btn {
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                height: 30px;
                display: flex;
                align-items: center;
                border-radius: 15px;
                border: 1px solid #3F9C94;
                color: #0AD39F;
                font-size: 16px;
                background-color: #fff;
                padding: 0 7px;
            }
        }
        .data-item:nth-child(1){
            .user-rank {
                color: #FFAF13;
            }
        }
        .data-item:nth-child(2){
            .user-rank {
                color: #36BAFF;
            }
        }
        .data-item:nth-child(3){
            .user-rank {
                color: #B78DFF;
            }
        }

      .data-title-china {
        display: flex;
        align-items: center;
        padding-top: 5px;
        padding-bottom: 7px;
        color: #808080;
        font-size: 16px;
        border-bottom: 1px solid #F0F0F0;
        .user-rank {
          min-width: 32px;
        }
        .user-name {
          margin-left: 33px;
          width: 140px;
        }
      }
      .data-item-china {
        display: flex;
        align-items: center;
        padding: 12px 0;
        color: #808080;
        font-size: 18px;
        border-bottom: 1px solid #F0F0F0;
        position: relative;
        .user-rank {
          width: 32px;
          font-size: 20px;
        }
        .user-name {
          display: flex;
          align-items: center;
          .avatar {
            width: 28px;
            height: 28px;
          }
          .name {
            margin-left: 5px;
            width: 91px;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
            color: #000;
          }
        }
      }
    }
    ::v-deep .van-picker__cancel,::v-deep  .van-picker__confirm{
      font-size: 20px!important;
    }
    ::v-deep .regions .van-picker-column{
      font-size: 20px!important;
    }
    ::v-deep .jiabold .van-picker-column,::v-deep .jiabold .van-picker__title, ::v-deep .jiabold .van-picker__confirm, ::v-deep .jiabold .van-picker__cancel{
      font-size: 20px!important;
    }

    ::v-deep .regions .van-picker-column:nth-child(4){
      display: none;
    }
    .scrollerWrap{
      position:absolute;
      //margin-top: 26.23vw;
      width:100%;
      height:100%;//有header的时候可能会出现滚动条，所以最好高度是除去header的高度
      top:20px;//一般页面有header的时候需要留出header的高度
      bottom:20px;
      main{
        height:100%;
      }
    }
    .margintop{
      top:100px;//一般页面有header的时候需要留出header的高度
      height:90%;
    }
    ::v-deep .spinner{
      display: none;
    }
</style>
